<template>
	<div class="default_box">
		<div class="default_box_menu">
			<slot name="menu"></slot>
		</div>
		<div class="default_box_right">
			<div class="default_box_right_header">
				<slot name="header"></slot>
			</div>
			<div class="default_box_right_content">
				<slot name="content"></slot>
			</div>
		</div>
	</div>
</template>

<script setup></script>

<style scoped lang="scss">
	.default_box {
		width: 100vw;
		height: 100vh;
		display: flex;
		&_menu {
			width: 200px;
			border: 1px solid #ccc;
			height: 100vh;
			overflow-y: scroll;
		}
		&_right {
			width: calc(100vw - 200px);
			&_header {
				height: 100px;
				border: 1px solid #ccc;
			}
			&_content {
				overflow-y: scroll;
				height: calc(100vh - 100px);
				border: 1px solid #ccc;
			}
		}
	}
</style>
